<template>
    <div>
        <el-steps :active="active" finish-status="success">
          <el-step title="个人信息"></el-step>
          <el-step title="车辆信息"></el-step>
          <el-step title="照片信息"></el-step>
        </el-steps>
        <el-card class="box-card" v-show="active == 0">
            <div slot="header" class="clearfix">
                <span>个人信息</span>
            </div>
            <el-form ref="form" :model="form" label-width="150px" :inline="true">
                <el-form-item label="司机姓名">
                  <el-input v-model="form.name"/>
                </el-form-item>
                <el-form-item label="性别" :inline="false">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="0" />
                    <el-option label="女" value="1" />
                  </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="form.age"/>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input v-model="form.idNumber" />
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="form.phone" placeholder="联系方式为必填项"/>
                </el-form-item>
                <el-form-item label="初次领驾照日期">
                  <el-date-picker
                    v-model="form.firstTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="驾驶证到期时间">
                  <el-date-picker
                    v-model="form.exp"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="证件类型">
                  <el-select v-model="form.type" placeholder="证件类型">
                    <el-option label="A1" value="A1" />
                    <el-option label="A2" value="A2" />
                    <el-option label="A3" value="A3" />
                    <el-option label="B1" value="B1" />
                    <el-option label="B2" value="B2" />
                    <el-option label="B3" value="B3" />
                    <el-option label="C1" value="C1" />
                    <el-option label="C2" value="C2" />
                    <el-option label="C3" value="C3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="驾龄是否三年">
                    <el-radio-group v-model="form.isSatisfy">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card" v-show="active == 1">
            <div slot="header" class="clearfix">
                <span>车辆信息</span>
                <el-switch
                  style="float: right;"
                  v-model="value"
                  active-text="带车加入"
                  inactive-text="无车加入">
                </el-switch>
            </div>
            <el-form ref="form" :model="form" label-width="150px" :inline="true" v-show="value">
                <el-form-item label="车牌号">
                  <el-input v-model="carForm.number"/>
                </el-form-item>
                <el-form-item label="车龄">
                  <el-input v-model="carForm.age"/>
                </el-form-item>
                <el-form-item label="车长(米)">
                  <el-input v-model="carForm.carLength" />
                </el-form-item>
                <el-form-item label="载重(吨)">
                  <el-input v-model="carForm.load" />
                </el-form-item>
                <el-form-item label="车型">
                  <el-select v-model="carForm.type" placeholder="车辆类型">
                    <el-option label="高栏货车" value="高栏货车" />
                    <el-option label="低栏货车" value="低栏货车" />
                    <el-option label="厢式货车" value="厢式货车" />
                  </el-select>
                </el-form-item>
                <el-form-item label="发动机号码">
                  <el-input v-model="carForm.engineNo" />
                </el-form-item>
                <el-form-item label="车辆所有人">
                  <el-input v-model="carForm.people" />
                </el-form-item>
                <el-form-item label="车辆注册日期">
                  <el-date-picker
                    v-model="carForm.creationTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card" v-show="active == 2" style="padding-bottom: 20px;">
            <div slot="header" class="clearfix">
                <span>照片信息</span>
            </div>
            <div style="float: left;margin-left: 18%;">
                <span>身份证正面照片</span>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload1">
                  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style="float: left;margin-left: 30px;">
                <span>司机免冠照片</span>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload2">
                  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style="float: left;margin-left: 30px;">
                <span>驾驶证主页照片</span>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload3">
                  <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style="float: left;margin-left: 30px;">
                <span>行驶证主页照片</span>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload4">
                  <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style="float: left;margin-left: 30px;">
                <span>交强险照片</span>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload5">
                  <img v-if="imageUrl5" :src="imageUrl5" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </el-card>
        <el-card class="box-card" v-show="active == 3">
            <div slot="header" class="clearfix">
                <span>确认信息</span>
            </div>
            <el-collapse>
              <el-collapse-item title="个人信息" name="1">
                <el-form ref="form" :model="form" label-width="150px" :inline="true">
                    <el-form-item label="司机姓名">
                      <el-input v-model="form.name" disabled/>
                    </el-form-item>
                    <el-form-item label="性别" :inline="false">
                      <el-select v-model="form.sex" placeholder="请选择性别" disabled>
                        <el-option label="男" value="0" />
                        <el-option label="女" value="1" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="年龄">
                      <el-input v-model="form.age" disabled/>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="form.email" disabled/>
                    </el-form-item>
                    <el-form-item label="身份证号">
                      <el-input v-model="form.idNumber" disabled/>
                    </el-form-item>
                    <el-form-item label="联系方式">
                      <el-input v-model="form.phone" disabled/>
                    </el-form-item>
                    <el-form-item label="初次领驾照日期">
                      <el-date-picker
                        disabled
                        v-model="form.firstTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                    <el-form-item label="驾驶证到期时间">
                      <el-date-picker
                        disabled
                        v-model="form.exp"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                    <el-form-item label="证件类型">
                      <el-select v-model="form.type" placeholder="证件类型" disabled>
                        <el-option label="A1" value="A1" />
                        <el-option label="A2" value="A2" />
                        <el-option label="A3" value="A3" />
                        <el-option label="B1" value="B1" />
                        <el-option label="B2" value="B2" />
                        <el-option label="B3" value="B3" />
                        <el-option label="C1" value="C1" />
                        <el-option label="C2" value="C2" />
                        <el-option label="C3" value="C3" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="驾龄是否三年">
                        <el-radio-group v-model="form.isSatisfy" disabled>
                          <el-radio label="是"></el-radio>
                          <el-radio label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="车辆信息" name="2">
                <el-form ref="form" :model="form" label-width="150px" :inline="true" v-show="value">
                    <el-form-item label="车牌号">
                      <el-input v-model="carForm.number" disabled/>
                    </el-form-item>
                    <el-form-item label="车龄">
                      <el-input v-model="carForm.age" disabled/>
                    </el-form-item>
                    <el-form-item label="车长(米)">
                      <el-input v-model="carForm.carLength" disabled/>
                    </el-form-item>
                    <el-form-item label="载重(吨)">
                      <el-input v-model="carForm.load" disabled/>
                    </el-form-item>
                    <el-form-item label="车型">
                      <el-select v-model="carForm.type" placeholder="车辆类型" disabled>
                        <el-option label="高栏货车" value="高栏货车" />
                        <el-option label="低栏货车" value="低栏货车" />
                        <el-option label="厢式货车" value="厢式货车" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="发动机号码">
                      <el-input v-model="carForm.engineNo" disabled/>
                    </el-form-item>
                    <el-form-item label="车辆所有人">
                      <el-input v-model="carForm.people" disabled/>
                    </el-form-item>
                    <el-form-item label="车辆注册日期">
                      <el-date-picker
                        disabled
                        v-model="carForm.creationTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="照片信息" name="3">
                <div style="float: left;margin-left: 16%;margin-bottom: 20px;">
                    <span>身份证正面照片</span>
                    <el-image
                        class="avatar"
                        :src="imageUrl1"
                        :preview-src-list="[imageUrl1]">
                    </el-image>
                </div>
                <div style="float: left;margin-left: 30px;margin-bottom: 20px;">
                    <span>司机免冠照片</span>
                    <el-image
                        class="avatar"
                        :src="imageUrl2"
                        :preview-src-list="[imageUrl2]">
                    </el-image>
                </div>
                <div style="float: left;margin-left: 30px;margin-bottom: 20px;">
                    <span>驾驶证主页照片</span>
                    <el-image
                        class="avatar"
                        :src="imageUrl3"
                        :preview-src-list="[imageUrl3]">
                    </el-image>
                </div>
                <div style="float: left;margin-left: 30px;margin-bottom: 20px;">
                    <span>行驶证主页照片</span>
                    <el-image
                        class="avatar"
                        :src="imageUrl4"
                        :preview-src-list="[imageUrl4]">
                    </el-image>
                </div>
                <div style="float: left;margin-left: 30px;margin-bottom: 20px;">
                    <span>交强险照片</span>
                    <el-image
                        class="avatar"
                        :src="imageUrl5"
                        :preview-src-list="[imageUrl5]">
                    </el-image>
                </div>
              </el-collapse-item>
            </el-collapse>
            <el-button type="primary" style="margin-top: 10px;margin-left: 45%;" @click="submit()">提交</el-button>
        </el-card>
        <el-card class="box-card" v-show="active == 4">
            <el-result icon="success" title="注册成功" subTitle="请根据提示进行操作" v-show="flag">
              <template slot="extra">
                <el-button type="primary" size="medium" @click="back()">返回</el-button>
              </template>
            </el-result>
            <el-result icon="info" title="注册失败" subTitle="请根据提示进行操作" v-show="!flag">
                <template slot="extra">
                    <el-button type="primary" size="medium" @click="back()">返回</el-button>
                </template>
            </el-result>
        </el-card>
        <el-button style="margin-top: 12px;margin-left: 40%;" @click="pre">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                active:0,
                value:true,
                flag:true,
                imageUrl1:undefined,
                imageUrl2:undefined,
                imageUrl3:undefined,
                imageUrl4:undefined,
                imageUrl5:undefined,
                file1:undefined,
                file2:undefined,
                file3:undefined,
                file4:undefined,
                file5:undefined,
                form:{
                    name:'',
                    sex:'',
                    age:'',
                    email:'',
                    idNumber:'',
                    firstTime:'',
                    exp:'',
                    phone:'',
                    isSatisfy:'',
                    type:''
                },
                carForm:{
                    number:'',
                    age:'',
                    carLength:'',
                    load:'',
                    type:'',
                    engineNo:'',
                    people:'',
                    creationTime:''
                }
            }
        },
        methods: {
            requestUpload() {
            },
            back() {
                this.active = 0;
                this.form = {
                    name:'',
                    sex:'',
                    age:'',
                    email:'',
                    idNumber:'',
                    firstTime:'',
                    exp:'',
                    phone:'',
                    isSatisfy:'',
                    type:''
                };
                this.carForm = {
                    number:'',
                    age:'',
                    carLength:'',
                    load:'',
                    type:'',
                    engineNo:'',
                    people:'',
                    creationTime:''
                };
                this.value = true;
                this.flag = true;
                this.imageUrl1 = undefined;
                this.imageUrl2 = undefined;
                this.imageUrl3 = undefined;
                this.imageUrl4 = undefined;
                this.imageUrl5 = undefined;
                this.file1 = undefined;
                this.file2 = undefined;
                this.file3 = undefined;
                this.file4 = undefined;
                this.file5 = undefined;
            },
            beforeAvatarUpload1(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl1 = reader.result
                    }
                    this.file1 = file
                }
            },
            beforeAvatarUpload2(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl2 = reader.result
                    }
                    this.file2 = file
                }
            },
            beforeAvatarUpload3(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl3 = reader.result
                    }
                    this.file3 = file
                }
            },
            beforeAvatarUpload4(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl4 = reader.result
                    }
                    this.file4 = file
                }
            },
            beforeAvatarUpload5(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl5 = reader.result
                    }
                    this.file5 = file
                }
            },
            next() {
                if (this.active < 3) {
                    if (this.active == 2) {
                        if (this.file1 === undefined || this.file2 === undefined || this.file3 === undefined || this.file4 === undefined || this.file5 === undefined){
                            this.$message.error("所有图片都需要上传")
                            return
                        } else {
                            this.active ++;
                        }
                    } else if (this.active == 1 && this.value){
                        if (this.carForm.number == '') {
                            this.$message.error("车牌号不能为空");
                            return;
                        } else if (this.carForm.engineNo == '') {
                            this.$message.error("发动机号码不能为空");
                            return;
                        } else if (this.carForm.creationTime == '') {
                            this.$message.error("注册时间不能为空");
                            return;
                        } else {
                            this.active ++;
                        }
                    } else {
                        this.active ++;
                    }
                }
                    
            },
            pre() {
                if (this.active > 0)
                    this.active --;
            },
            submit() {
                this.active = 4;
                let formData = new FormData();
                formData.append("file1", this.file1);
                formData.append("file2", this.file2);
                formData.append("file3", this.file3);
                formData.append("file4", this.file4);
                formData.append("file5", this.file5);
                formData.append("driver", JSON.stringify(this.form));
                formData.append("car", JSON.stringify(this.carForm));
                axios({
                    url: "http://localhost:9090/driver/registerDriverAndCar",
                    method: "POST",
                    data: formData,
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                          message: '司机注册成功',
                          type: 'success'
                        });
                    } else {
                        this.flag = false;
                        this.$message.error('司机注册失败');
                    }
                })
                .catch((e) => {
                    console.log(e.response.data.error.message)
                });
            }
        }
    }
</script>

<style scoped>
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
</style>
